import React, { useEffect } from 'react';
import Svg from '@ray-js/svg';

export const CircleProgress = ({ current = 1, max = 100, min = 0, size = 160 }) => {
  const percent = ((current - min) / (max - min)) * 100;

  const [stroke, setStroke] = React.useState(200);
  const scope = 330;
  const halfPath = size / 2;

  useEffect(() => {
    setStroke((percent / 100) * scope);
  }, [percent]);

  return (
    <Svg width={`${size}px`} height={`${size}px`}>
      <circle
        cx={halfPath}
        cy={halfPath}
        r="70"
        stroke="#68a3f4"
        stroke-width="10"
        fill="none"
        stroke-dasharray="330,300"
        stroke-linecap="round"
        transform="rotate(135, 90, 90)"
      ></circle>
      <circle
        cx={halfPath}
        cy={halfPath}
        r="70"
        stroke="#fff"
        stroke-width="10"
        fill="none"
        style={`stroke-dasharray: ${stroke},900; transition: stroke-dasharray 2s`}
        stroke-linecap="round"
        transform="rotate(135, 90, 90)"
      ></circle>
    </Svg>
  );
};
